@import models.Tables.MtgenomeRow
@import models.Tables.MtRow
@(row: MtRow, gene: MtgenomeRow)(implicit session: Session)
    @english.home.main("Mitochondria Detail info") {


        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("mscroll/css/lz_index.css")">

        <style>

                a {
                    color: cornflowerblue;
                }

                th {
                    width: 20%;
                }


                .js-plotly-plot .plotly .cursor-crosshair {
                    cursor: default;
                }

                .area_img {
                    float: left;
                    padding-right: 10px;
                }

        </style>

        <hgroup class="page-head">
            <h2> <span>Mitochondria</span> Detail info</h2>
        </hgroup>

        <div id="container" class="clearfix" >
            <div id="content" class="full-width container">

                <div class="box">
                    <h4 class="area">
                        <div class="area_img">
                            <i class="fa fa-minus"></i>
                        </div>
                        <span class="area_title" data-id="1">Basic</span>

                    </h4>
                    <div class="picture_list">

                        <table class="table table-striped table-hover table-bordered" style="table-layout: fixed;
                            float: left;
                            word-wrap: break-word">
                            <tbody>
                                <tr>
                                    <th rowspan="13" style="width: 50%;
                                        vertical-align: middle;
                                        text-align: center" >
                                        <img src="/PODB/utils/getMtimg?id=@row.id"
                                        style='color: cornflowerblue;
                                            max-height: 500px'/>
                                    </th>
                                    <th>Species</th>
                                    <td>
                                        <a href='javascript:searchSpecies("@row.species")' style='font-style: italic'>@row.species</a>
                                    </td>
                                </tr>

                                <tr>
                                    <th>Phylumn</th>
                                    <td>
                                        <a href='javascript:postOpenWindow("@row.phylum")' style='font-style: italic'>@row.phylum</a>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Class</th>
                                    <td>
                                        <a href='javascript:postOpenWindow("@row.classes")' style='font-style: italic'>@row.classes</a>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Order</th>
                                    <td>
                                        <a href='javascript:postOpenWindow("@row.order")' style='font-style: italic'>@row.order</a>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Family</th>
                                    <td>
                                        <a href='javascript:postOpenWindow("@row.family")' style='font-style: italic'>@row.family</a>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Genus</th>
                                    <td>
                                        <a href='javascript:searchGenus("@row.genus")' style='font-style: italic'>@row.genus</a>
                                    </td>
                                </tr>

                                <tr>
                                    <th>BP</th>
                                    <td>
                                    @row.bp
                                    </td>
                                </tr>
                                <tr>
                                    <th>Pubmed</th>
                                    <td>
                                    @row.pubmed
                                    </td>
                                </tr>
                                <tr>
                                    <th>Journal</th>
                                    <td>
                                    @row.journal
                                    </td>
                                </tr>
                                <tr>
                                    <th>Title</th>
                                    <td>
                                    @row.title
                                    </td>
                                </tr>
                                <tr>
                                    <th>Reference</th>
                                    <td>
                                    @row.submiter
                                    </td>
                                </tr>

                            </tbody>
                        </table>

                    </div>
                </div>


                <div class="box">
                    <h4 class="area" >
                        <div class="area_img">
                            <i class="fa fa-minus"></i>
                        </div>
                        <span class="area_title" data-id="1">Geographical distribution</span>
                    </h4>
                    <div class="picture_list">
                        <div id="worldmap" style="float: left;
                            width: 50%"></div>
                        <table class="table table-hover table-striped table-bordered" style="float: left;
                            width: 50%">
                            <tbody>
                                <tr>
                                    <th style="width: 40%;">Geographical position</th>
                                    <td>@row.position</td>
                                </tr>

                                <tr>
                                    <th>GPS</th>
                                    <td></td>
                                </tr>
                                <tr>
                                    <th>Collection people</th>
                                    <td>@row.colPeople</td>
                                </tr>
                                <tr>
                                    <th>Collection or strain information</th>
                                    <td>@row.colInfo</td>
                                </tr>
                                <tr>
                                    <th>Collection date</th>
                                    <td>@row.colDate</td>
                                </tr>

                            </tbody>
                        </table>

                    </div>
                </div>


                <div class="box" id="circle">
                    <h4 class="area">
                        <div class="area_img">
                            <i class="fa fa-minus"></i>
                        </div>
                        <span class="area_title" data-id="1">Circle</span>
                    </h4>
                    <div class="picture_list">

                        <img src="/PODB/utils/getMtOgdraw?gb=@gene.name"
                        style="float: left;
                            width: 50%">

                        <table class="table table-hover table-striped table-bordered" style="float: left;
                            width: 50%">

                            <tbody>
                                <tr>
                                    <th style="width: 40%;">Species</th>
                                    <td>@row.species.split(" ").init.mkString(" ")</td>
                                </tr>
                                <tr>
                                    <th>Database</th>
                                    <td>@gene.name</td>
                                </tr>
                                <tr>
                                    <th>Length(bp)</th>
                                    <td>@gene.length</td>
                                </tr>
                                <tr>
                                    <th>GC%</th>
                                    <td>@gene.gc</td>
                                </tr>
                                <tr>
                                    <th>ATP synthase genes</th>
                                    <td>@gene.atp</td>
                                </tr>
                                <tr>
                                    <th>NADH dehydrogenase genes</th>
                                    <td>@gene.nadh</td>
                                </tr>
                                <tr>
                                    <th>ribosomal protein genes</th>
                                    <td>@gene.protein</td>
                                </tr>
                                <tr>
                                    <th>ORF</th>
                                    <td>@gene.orf</td>
                                </tr>
                                <tr>
                                    <th>tRNA genes</th>
                                    <td>@gene.trna</td>
                                </tr>
                                <tr>
                                    <th>rRNA genes</th>
                                    <td>@gene.rrna</td>
                                </tr>
                                <tr>
                                    <th>Other genes</th>
                                    <td>@gene.other</td>
                                </tr>
                                <tr>
                                    <th>Total genes</th>
                                    <td>@gene.totle</td>
                                </tr>
                                <tr>
                                    <th>Download</th>
                                    <td>
                                        <a target="_blank" href="/PODB/download/downloadMtSeqsFile?id=@{gene.id}&types=cds">
                                            @{
                                            gene.name
                                            }.cds</a></br>
                                    <a target="_blank" href="/PODB/download/downloadMtSeqsFile?id=@{gene.id}&types=pep">
                                        @{
                                        gene.name
                                        }.pep</a></br>
                                <a target="_blank" href="/PODB/download/downloadMtSeqsFile?id=@{gene.id}&types=fasta">
                                    @{
                                    gene.name
                                    }.fasta</a>
                        </td>
                        </tr>


                            </tbody>

                        </table>
                    </div>
                </div>


                <div class="box">
                    <h4 class="area" id="genomeb" onclick="reloadGbrowser()">
                        <div class="area_img">
                            <i class="fa fa-minus"></i>
                        </div>
                        <span class="area_title" data-id="1">Genome Browse</span>
                    </h4>
                    <div class="picture_list">
                        <iframe style="border: 1px solid rgb(80, 80, 80);" src="http://210.22.121.250:20795/jb/index.html?data=my_data/PODB/MT/@{gene.name.split('.').head}/data&loc=&tracks=DNA,Annotation&tracklist=0&nav=1&overview=0"
                        height="250" width="100%" name="jbrowse_iframe" id="iframe">
                        </iframe>

                    </div>
                </div>

                <div class="box">
                    <h4 class="area">
                        <div class="area_img">
                            <i class="fa fa-minus"></i>
                        </div>
                        <span class="area_title" data-id="1"> Gene </span>
                    </h4>
                    <div class="picture_list">
                        <table class="table table-striped table-hover table-bordered" id="table" style="table-layout: fixed;
                            word-wrap: break-word" data-pagination="true" data-search="true"
                        data-toolbar="#toolbar" data-page-list="[10, 25]" data-search-align="left" data-multiple-search="true">
                            <thead>
                                <th data-field="geneid" data-sortable="true" style="width: 15%;">Gene ID</th>
                                <th data-field="start" data-sortable="true" style="width: 10%;">Start</th>
                                <th data-field="end" data-sortable="true" style="width: 10%">End</th>
                                <th data-field="strand" data-sortable="true" style="width: ;
                                    10%">Strand</th>
                                <th data-field="name" data-sortable="true" style="width: ;
                                    15%">Gene Name</th>
                                <th data-field="product" data-sortable="true" style="width: ;
                                    40%">Product</th>
                            </thead>
                        </table>

                    </div>
                </div>

            </div>


        </div>


        <script src="@routes.Assets.versioned("mscroll/js/mscroll.js")" type="text/javascript"></script>
        <script src="@routes.Assets.versioned("Highmaps-6.1.0/highmaps.js")" type="text/javascript"></script>
        <script src="@routes.Assets.versioned("Highmaps-6.1.0/exporting.js")" type="text/javascript"></script>
        <script src="@routes.Assets.versioned("Highmaps-6.1.0/data.js")" type="text/javascript"></script>
        <script>

                $(function () {

                    $.ajax({
                        url: "/PODB/mitochondria/getAllGeneByGbId?id=" + @gene.id,
                        type: "post",
                        success: function (data) {
                            $("#table").bootstrapTable({
                                data: data,
                                columns: [{
                                    field: "geneid",
                                    title: "Gene ID",
                                    sortable: true,
                                    width: "12%"
                                }, {
                                    field: "start",
                                    title: "Start position",
                                    sortable: true,
                                    width: "12%"
                                }, {
                                    field: "end",
                                    title: "End position",
                                    sortable: true,
                                    width: "12%"
                                }, {
                                    field: "strand",
                                    title: "Strand",
                                    sortable: true,
                                    width: "12%"
                                }, {
                                    field: "name",
                                    title: "Gene Name",
                                    sortable: true,
                                    width: "12%"
                                }, {
                                    field: "product",
                                    title: "Product",
                                    sortable: true,
                                    width: "40%"
                                }]
                            })

                        }
                    })


                    // 地图路径，参考 https://img.hcharts.cn/mapdata/index.html
                    var map = getMapName('map'),
                            url = '/assets/Highmaps-6.1.0/world.js';

                    // 动态加载地图数据文件并生成图表。
                    loadScript(url, function () {
                        // 生成随机数据
                        var mapdata = Highcharts.maps[map.path],
                                data = [];


                        function drawMap(datas) {
                            Highcharts.each(datas, function (v, i) {
                                data.push({
                                    'hc-key': v.key,
                                    value: v.num
                                })
                            })

                            // 初始化图表
                            $('#worldmap').highcharts('Map', {
                                title: {
                                    text: map.cname || map.name
                                },
                                subtitle: {
                                    text: ''
                                },
                                mapNavigation: {
                                    enabled: true,
                                    enableMouseWheelZoom: false,
                                    buttonOptions: {
                                        verticalAlign: 'bottom'
                                    }
                                },
                                credits: {
                                    enabled: false
                                },
                                colorAxis: {
                                    min: 0,
                                    stops: [
                                        [0, '#EFEFFF'],
                                        [0.5, Highcharts.getOptions().colors[0]],
                                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.5).get()]
                                    ]
                                },
                                series: [{
                                    data: data,
                                    mapData: mapdata,
                                    joinBy: 'hc-key',
                                    name: '物种数',
                                    allowPointSelect: true,
                                    cursor: 'pointer',
                                    states: {
                                        hover: {
                                            color: '#a4edba'
                                        },
                                        select: {
                                            color: 'orange',
                                            borderColor: 'black',
                                            dashStyle: 'shortdot'
                                        }
                                    },
                                    tooltip: {
                                        useHTML: true,
                                        headerFormat: '',
                                        pointFormat: ' {point.properties.name}',
                                        footerFormat: ''
                                    }
                                }]
                            });
                        }

                        $.ajax({
                            url: "/US/PODB/mitochondria/getMtWorldPostion?id=" + @row.id,
                            type: "post",
                            success: function (datas) {
                                drawMap(datas)
                            }
                        })


                    });


                });

                function setColumns(gb, value) {
                    var element = $("input:checkbox[value=" + value + "]");

                    if (element.is(":checked")) {
                        $('#table-' + gb).bootstrapTable('showColumn', value);
                    } else {
                        $('#table-' + gb).bootstrapTable('hideColumn', value);
                    }
                }

                function reloadGbrowser(obj) {
                    $("#iframe-" + obj).attr('src', $("#iframe-" + obj).attr('src'));
                }

                function postOpenWindow(value) {
                    var form = $("<form method='post' target='_blank' action='https://www.algaebase.org/search/taxonomy/'></form>");
                    form.append("<input name='currentMethod' type='hidden' value='taxa' />");
                    form.append("<input name='fromSearch' type='hidden' value='yes' />");
                    form.append("<input name='htax_taxon' type='text' value='" + value + "'>");
                    $(document.body).append(form);
                    form.submit();
                }

                function searchGenus(value) {
                    var form = $("<form method='post' target='_blank' action='https://www.algaebase.org/search/genus/'></form>");
                    form.append("<input name='currentMethod' type='hidden' value='genera' />");
                    form.append("<input name='fromSearch' type='hidden' value='yes' />");
                    form.append("<input name=\"displayCount\" type=\"hidden\" value=\"20\">");
                    form.append("<input name=\"genus_op\" type=\"hidden\" value=\"cn\">");
                    form.append("<input name='genus' type='text' value='" + value + "'>");
                    $(document.body).append(form);
                    form.submit();
                }

                function searchSpecies(value) {
                    var form = $("<form method='post' target='_blank' action='https://www.algaebase.org/search/species/'></form>");
                    form.append("<input name='currentMethod' type='hidden' value='species' />");
                    form.append("<input name='fromSearch' type='hidden' value='yes' />");
                    form.append("<input name=\"displayCount\" type=\"hidden\" value=\"20\">");
                    form.append("<input name=\"sortBy\" type=\"hidden\" value=\"genus\">");
                    form.append("<input name=\"sortBy2\" type=\"hidden\" value=\"species\">");
                    form.append("<input name='name' type='text' value='" + value + "'>");
                    $(document.body).append(form);
                    form.submit();
                }

        </script>

    }